<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户详情</title>
</head>

<body>
    <!-- 头部 -->
    <div th:include="head" style="width: 100%;"></div>
    <div id="userDetail">
        <div>
            <!-- 个人信息 -->
            <div class="center personnal" v-if="user">
                <div class="center">
                    <div class="headImage" :style='{"background-image":"url("+user.headImage+")"}'>
                        {{user.name}}
                    </div>
                    <div>
                        <div>
                            <span>关注{{user.follows}}</span>
                            <span>粉丝{{user.fans}}</span>
                            <span>文章{{user.articles}}</span>
                            <span>资产{{user.balance}}</span>
                        </div>
                        <!-- 右侧个人简介 -->
                        <div id="profile" v-if="user">
                            <span class="gray">个人简介</span>
                            <span class="small gray description">{{user.profile}}</span>
                        </div>
                    </div>
                </div>
                <div>
                    <button v-if="!isFollow" class="ui secondary button" @click="follow(user.userId)">关注</button>
                    <button v-else class="ui secondary button" @click="follow(user.userId)">取关</button>
                </div>
            </div>

            <!-- 导航栏 -->
            <div  id="nav">
                <left-nav :menu="menu"></left-nav>
            </div>
            <div id="main"></div>

        </div>
    </div>
    <!-- 用户文章数据 -->
    <script src="/js/userDetail.js"></script>
    <link rel="stylesheet" href="/css/userDetail.css">
</body>

</html>